<template>
	<div class="containers">
		<div class="container">
			<van-swipe :autoplay="3500" class="container_swipe_wrapper" v-touch:right="backbefore">
				<van-swipe-item v-for="(image,index) in imagesExceptLast" class="van_swipe_item">
					<img :src=image alt="container_swipe_wrapper_img" class="container_swipe_wrapper_img">
				</van-swipe-item>
			</van-swipe>
			<img src="../../assets/goods_left.png" class="left_btn" @click="goPrePage">

			<img src="../../assets/goods_share.png" alt="share" class="myshare"
				@click="myShare(item.title,item.description)">
			<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

		</div>

		<div class="container_desc">
			<p class="text0">{{item.title}}</p>
			<p class="text1">Ticket Price:AED:{{item.money}}</p>
			<p class="text3">Draw: if the campaign is sold out.</p>
			<van-progress color="#FFC43A" stroke-width="20px" border-radius="35px"
				:percentage="threeDecimal(Number(item.canyurenshu/(item.zongrenshu/1.0)))*100" :showPivot="false"
				class="myprogress"  />
				<p class="text33">{{item.canyurenshu}}/{{item.zongrenshu}}</p>
			<!-- <p class="text33">{{threeDecimal(Number(item.canyurenshu/(item.zongrenshu/1.0)))*100}}/100</p> -->
		</div>

		<div class="container_desc2">
			<div class="text55">
			</div>
			<p class="text5">Prize details</p>
			<p class="text51">{{item.description}}</p>
			<p class="text6" ref="text6" v-html="item.content"></p>
			<!-- <div v-html="item.content"></div> -->
			<p class="text7">Make it yours!</p>
			<p class="text7">if the number of tickets soled does not reach the the target within 30 days.the draw for
				this product will be canceled,and full refunds will be issued.</p>
			<p class="text8" style="font-weight: bold;">About the rule</p>
			<p class="text9">1.Every merchandise will be divided into N pieces.</p>
			<p class="text9">2.Each piece corresponds to a unique lucky number.</p>
			<p class="text9">3.You can buy more pieces.</p>
			<!-- <p class="text9">4.About the Winning calculation formula.</p> -->
			<p class="text9">1</p>
			<p class="text9">1</p>
			<p class="text9">1</p>

		</div>

		<van-action-bar class="footer">


			<van-button round type="success" color="#000000" plain
				style="height: 2rem; width: 5.5rem; border-radius: 60px; font-size: 0.8rem;" @click="AddToCart()"
				class="addCartBtn">Add to cart</van-button>
			<van-button round type="success" color="#3668E3"
				style="height: 2rem; width: 5.5rem; border-radius: 60px; font-size: 0.8rem;" @click="BuyGoods()"
				class="buyBtn">Buy</van-button>

		</van-action-bar>
	</div>
</template>

<script>
	import {
		showToast,
		ShareSheet,
	} from 'vant';

	import 'vant/es/toast/style';
	import globalData from '../../main.js';

	import {
		setCookie,
		convertUnixToDate,
		cartCookie,
		botimShare
	} from "../../util.js"

	export default {
		data() {
			return {
				showShare: false,
				item: {},
				uploads_url: '',
				imageArray: [
				],
				realValue: {},
			};
		},
		computed: {
			imagesExceptLast() {
				return this.imageArray.slice(0, -1);
			},
			threeDecimal() {
				return function(value) {
					return value.toFixed(3);
				}
			},
		},
		careted() {
			window.scroll(0, 0);
		},
		mounted() {
			this.uploads_url = globalData['uploads_url']
			var context = this.$route.params.context
			console.log("===mounted===")
			//console.log(context)
			// for (let context in context) {
			// 	console.log("context:",context);
			// }
			var objValue = JSON.parse(context)
			var that = this
			that.item = objValue
			that.images = that.item.picarr;
			this.parsePicArr(that.images);

			let text6 = this.$refs.text6
			console.log(text6)
			if (text6) {
				text6.style.fontFamily = "PingFang SC";
				//console.log(typeof that.item.content)
				that.item.content = that.item.content.replace("&quot;Amazon Ember&quot;, Arial, sans-serif",
				"PingFang SC");
				//console.log(that.item.content)
			}
			window.scroll(0, 0);
			this.getAllDraws();
			// 	console.log("===that.images===",that.images)
			// 	console.log("that.item:", that.item)
			// 	console.log(typeof that.item)
			// 	console.log(typeof that.item.description)
		},
		methods: {
			getAllDraws() {
				var that = this;
				var uid = this.$cookies.get('uid')				
				const formData = new FormData()
				if (uid != null) {
					formData.append("uid", uid)
				}
				this.axios({
					method: "POST", // method:"post" data:{"firstName":"Tom","lastName":"Sun"} //get params:{id:123}
					url: globalData['mobile_url'] + "cart/cartlist/",
					data: formData,
				}).then(function(response) {
					console.log("mounted cartlist response:", response)
					// if (Object.keys(response.data[0]).length > 0) {
					// 	that.show = true
					// }
					that.realValue.length = 0
					for (let key in response.data[2]) {
						var curNum = response.data[2][key].num
						that.realValue[key] = curNum;
					}
				}).catch(function(error) { // 请求失败处理
					console.log("---error start---");
					console.log(error);
					console.log("---error end---");
				});
			},
			formatPrice() {
				//return '¥' + (this.goods.price / 100).toFixed(2);
			},

			onClickCart() {
				this.$router.push('cart');
			},

			sorry() {
				showToast('sorry~');
			},
			goPrePage() {
				//showToast('返回~');
				//this.$router.go(-1);
				this.$router.back();
			},
			AddToCart: function() {
				var uid = this.$cookies.get('uid')
				console.log('===AddToCart uid===', uid)
				if (Number(this.item.canyurenshu) >= Number(this.item.zongrenshu)) {
					showToast("goods not enough item1!" + item.canyurenshu)
					return;
				}

				if (Number(this.realValue[this.item.id]) >= Number(this.item['shenyurenshu'])) {
					showToast("goods not enough item!"+this.item.id)
					this.realValue[this.item.id] = this.item['shenyurenshu']
					return;
				}
				
				this.axios({
					method: "GET",
					url: globalData['add_cart_url'] + this.item.id + "/" + "1/0/" + uid
				}).then(function(response) {
					//console.log("AddToCart response:", response)
					//console.log("AddToCart response data:", response.data) //JSON.stringify(data)
					// for (var i = 0; i < response.data.length; i++) {
					// 	console.log("AddToCart one item data:", response.data[i])
					// }
					if (response.data.code != null) {
						if (response.data.code != 0) {
							if (response.data.code == 5) {
								showToast("Cart is Full!")
							} else {
								showToast("Add to Cart Error!")
							}

						} else {
							showToast("Add to cart successfully!")
						}
					} else {
						showToast("Add to cart successfully!")
					}
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			BuyGoods: function() {
				//this.$router.push('order')
				//console.log("---BuyGoods  item:---", this.item)
				//console.log(typeof this.item)
				var contents = JSON.stringify(this.item);
				//console.log(typeof contents)
				//console.log(contents)
				// console.log("---BuyGoods---",this.goods_url+item.id)
				// this.$router.push('order')
				this.$router.push({
					name: 'order',
					params: {
						context: contents,
					}
				})
			},
			convertTime: function(timeStamp) {
				return convertUnixToDate(timeStamp)
			},
			parsePicArr: function(picArr) {
				//console.log("===picArr===",picArr)
				var infos = picArr.split(":");
				//console.log("===infos===",infos)
				for (var _info in infos) {
					//console.log("===_info===",infos[_info])
					//console.log("===_info===",typeof infos[_info])
					if (!infos[_info].includes("shopimg")) {
						continue
					}
					var newInfos = infos[_info].split(";");
					//console.log("===newInfos===",newInfos)
					for (var _info1 in newInfos) {
						//console.log("===newInfos[_info1]===",newInfos[_info1])
						if (!newInfos[_info1].includes("shopimg")) {
							continue
						}

						var imagestr = newInfos[_info1].split(";");
						//console.log("===images===",imagestr)
						for (var _image in imagestr) {
							//console.log("imagestr[_image]",imagestr[_image])
							var reg1 = new RegExp('"', "g")
							//console.log("imagestr[_image]",imagestr[_image].replace(reg1," "))
							if (imagestr[_image].includes("shopimg")) {
								//this.imageArray.push("require(\""+this.uploads_url+imagestr[_image].replace(reg1,"")+"\")")
								this.imageArray.push(this.uploads_url + imagestr[_image].replace(reg1, ""))
							}
						}
					}
				}
				//console.log("===this.imageArray===",this.imageArray)
			},
			backbefore() {
				//console.log("===backbefore===")
				showToast('back')
				this.$router.go(-1)
			},
			myShare(title, desc) {
				//console.log("===myShare===")
				botimShare(title, desc);
				//console.log("===myShare end===")
			},
		},
		setup() {
			const onSelect = (option) => {
				Toast(option.name);
				//showShare.value = false;
			};
		}
	};
</script>

<style scoped>
	.container {
		/* position: relative; */
	}

	.container_swipe_wrapper {
		/* top: 4rem; */
		width: calc(100vw);
		/* 	margin-left: 1rem;
		margin-right: 1rem; */
	}

	.container_swipe_wrapper_img {
		width: calc(100vw);
		/* margin-left: -0.5rem; */
		/* margin-right: 1rem; */
	}

	.left_btn {
		position: absolute;
		top: 30px;
		left: 15px;
		width: 64px;
		height: 64px;
		z-index: 1;
	}

	.myshare {
		position: absolute;
		top: 30px;
		right: 15px;
		width: 64px;
		height: 64px;
		/* padding-top: 40px; */
		/*position: absolute;
 		top: 2rem;
		left: 23.5rem;
		width: 2rem;
		height: 2rem; */
	}

	.notebook {
		position: relative;
		top: 6rem;
		width: 95vw;
		align-items: center;
	}

	.container_desc {
		position: relative;
		top: 3rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		width: calc(100vw - 1rem);
		height: 10rem;
		background-color: rgb(252, 72, 73, 1);
		border-radius: 1.875rem 1.875rem 0 0;
		text-align: left;
	}

	.text0 {
		margin: 0;
		padding: 0;
		position: relative;
		font-family: 'PingFang SC';
		color: white;
		font-size: 1.2rem;
		margin-left: 1rem;
		top: 1rem;
		font-weight: bold;
	}

	.text1 {
		margin: 0;
		padding: 0;
		position: absolute;
		font-family: 'PingFang SC';
		color: white;
		font-size: 30px;
		margin-left: 1rem;
		top: 0.5rem;
		margin-top: 100px;
	}

	.text2 {
		margin: 0;
		padding: 0;
		position: absolute;
		font-family: 'PingFang SC';
		font-size: 30px;
		color: rgb(204, 204, 204);
		/* top: 0.1rem; */
		margin-left: 1rem;
		margin-top: 200px;
	}

	.text3 {
		margin: 0;
		padding: 0;
		position: absolute;
		font-family: 'PingFang SC';
		font-size: 30px;
		color: rgb(204, 204, 204);
		/* top: 1px; */
		margin-left: 1rem;
		margin-top: 130px;
		/* top: -1rem; */
	}

	.text33 {
		margin: 0;
		padding: 0;
		position: absolute;
		/* top: -5.5rem;
		margin-left:85vw; */
		width: 110px;
		border-radius: 35px;
		color: white;
		left:620px;
		top: 120px;
		font-size: 20px;
	}


	.text4 {
		position: relative;
		font-family: 'PingFang SC';
		font-size: 1rem;
		color: rgb(120, 120, 120);
		top: 1px;
		margin-left: 16rem;
		top: -4rem;
	}

	.myprogress {
		margin: 0;
		padding: 0;
		position: absolute;
		/* top: -4.2rem;
		margin-left: 13.5rem; */
		width: 220px;
		border-radius: 35px;
		--van-progress-pivot-line-height: 1.3rem;
		/*啥单位???*/
		--van-progress-pivot-padding: 0px;
		/* --van-progress-pivot-border-radius: 50px; */
		--van-progress-pivot-text-color: white;
		--van-progress-pivot-font-size: 10px;
		--van-progress-pivot-background: blue;
		left: 390px;
		top: 115px;
	}

	.container_desc2 {
		position: relative;
		top: 1rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		width: calc(100vw - 1rem);
		height: 15rem;
		background-color: rgb(255, 255, 255, 1);
		/* border-color: rgb(125, 125, 0, 100); */
		border: 0.2rem;
		/* border-style: dashed; */
		font-family: 'PingFang SC';
		border-radius: 1.875rem 1.875rem 0 0;
		/*margin-top: 2rem;  新增的代码，为container_desc2添加顶部边距 */
	}

	.text55 {
		/* top:6rem; */
		height: 0.5rem;
		/* font-family: 'PingFang SC'; */
		/* color: black; */
		/* font-size: 1.2rem; */
		/* margin-left: 1rem; */
		/* font-weight: bold; */
		/* margin-top:4rem; */
	}

	.text5 {
		font-family: 'PingFang SC';
		/* color: black; */
		font-size: 1.2rem;
		margin-left: 1rem;
		font-weight: bold;
		margin-top: 1rem;
		/* margin-top:4rem; */
	}

	.text51 {
		font-family: 'PingFang SC';
		/* color: black; */
		font-size: 1rem;
		margin-left: 1rem;
	}

	.text6 {
		font-family: 'PingFang SC';
		font-size: 1rem;
		color: rgb(120, 120, 120);
		/* margin-left: 1rem; */
	}

	.text7 {
		font-family: 'PingFang SC';
		font-size: 1rem;
		color: rgb(120, 120, 120);
		margin-left: 1rem;
	}

	.text8 {
		font-family: 'PingFang SC';
		font-size: 1rem;
		color: rgb(120, 120, 120);
		margin-left: 1rem;
	}

	.text9 {
		font-family: 'PingFang SC';
		font-size: 1rem;
		color: rgb(120, 120, 120);
		margin-left: 1rem;
		line-height: 1rem;
		margin-bottom: 1rem;
	}

	.footer {
		position: fixed;
		width: 100vw;
		height: 5rem;
		bottom: 0rem;
		color: #000000;
	}

	.addCartBtn {
		position: relative;
		top: 0.1rem;
		left: 20vw;
		width: 6.5rem;
		font-family: 'PingFang SC';
		/* margin-bottom: 0.1rem; */
	}

	.buyBtn {
		top: 0.1rem;
		left: 40vw;
		width: 5.5rem;
		font-family: 'PingFang SC';
		/* margin-bottom: 0.1rem; */
	}

	.cont {
		width: 100%;
		height: 100%;
	}

	.van-toast__text {
		font-size: 1.5rem;
	}

	.van-toast {
		width: 100vw;
		/* 自定义宽度 */
		height: 50rem !important;
	}

	.a-list-item {
		font-family: 'PingFang SC' !important;
	}
</style>